<template>
  <view v-if="error_msg" class="wrap">{{ error_msg }}</view>
  <view v-else-if="pageList" class="decor">
    <template v-for="(item, index) in pageList">
      <assist-slicer-preview v-if="item.name === 'assist-slicer'" :key="index" :form-data="item.data"/>
      <goods-preview v-if="item.name === 'goods'" :key="index" :form-data="item.data"/>
      <goods-search-preview v-if="item.name === 'goods-search'" :key="index" :form-data="item.data"/>
      <image-adv-preview v-if="item.name === 'image-adv'" :key="index" :form-data="item.data"/>
      <image-text-nav-preview v-if="item.name === 'image-text-nav'" :key="index" :form-data="item.data"/>
      <magic-cube-preview v-if="item.name === 'magic-cube'" :key="index" :form-data="item.data"/>
      <notice-bar-preview v-if="item.name === 'notice-bar'" :key="index" :form-data="item.data"/>
      <rich-text-preview v-if="item.name === 'rich-text'" :key="index" :form-data="item.data"/>
      <shop-info-preview v-if="item.name === 'shop-info'" :key="index" :form-data="item.data"/>
      <title-text-preview v-if="item.name === 'title-text'" :key="index" :form-data="item.data"/>
      <to-shop-preview v-if="item.name === 'to-shop'" :key="index" :form-data="item.data"/>
      <video-module-preview v-if="item.name === 'video-module'" :key="index" :form-data="item.data"/>
      <shop-header-preview v-if="item.name === 'shop-header'" :key="index" :form-data="item.data"/>
      <home-seckill v-if="item.name === 'seckill'" :key="index"/>
      <shop-coupon v-if="item.name === 'shop-coupon'" :key="index" :shop-id="pages.seller_id"/>
    </template>
  </view>
</template>

<script>
import * as API_Pages from '../../api/pages'
import AssistSlicerPreview from './decor/AssistSlicer/AssistSlicerPreview'
import GoodsPreview from './decor/Goods/GoodsPreview'
import GoodsSearchPreview from './decor/GoodsSearch/GoodsSearchPreview'
import ImageAdvPreview from './decor/ImageAdv/ImageAdvPreview'
import ImageTextNavPreview from './decor/ImageTextNav/ImageTextNavPreview'
import MagicCubePreview from './decor/MagicCube/MagicCubePreview'
import NoticeBarPreview from './decor/NoticeBar/NoticeBarPreview'
import RichTextPreview from './decor/RichText/RichTextPreview'
import ShopInfoPreview from './decor/ShopInfo/ShopInfoPreview'
import TitleTextPreview from './decor/TitleText/TitleTextPreview'
import ToShopPreview from './decor/ToShop/ToShopPreview'
import VideoModulePreview from './decor/VideoModule/VideoModulePreview'
import ShopHeaderPreview from './decor/ShopHeader/ShopHeaderPreview'
import HomeSeckill from '@/components/home-seckill/home-seckill'
import ShopCoupon from '@/pages/shop/ShopCoupon'

export default {
  props: {
    pageId: {
      type: String,
      required: false
    },
    pageData: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      pages: '',
      error_msg: '',
      pageList: ''
    }
  },
  components: {
    AssistSlicerPreview,
    GoodsPreview,
    GoodsSearchPreview,
    ImageAdvPreview,
    ImageTextNavPreview,
    MagicCubePreview,
    NoticeBarPreview,
    RichTextPreview,
    ShopInfoPreview,
    TitleTextPreview,
    ToShopPreview,
    VideoModulePreview,
    ShopHeaderPreview,
    HomeSeckill,
    ShopCoupon
  },
  mounted() {
    if (this.pageId) {
      this.getPageData()
    } else {
      this.setPageData(this.pageData)
    }
  },
  methods: {
    async getPageData() {
      try {
        const res = await API_Pages.getPageDetail(this.pageId)
        this.setPageData(res)
      } catch (e) {
        this.error_msg = '数据加载失败，请稍候再试。。。'
      }
    },
    setPageData(data) {
      try {
        uni.setNavigationBarTitle({ title: data['page_name'] })
        // #ifdef H5
        const meta = document.createElement('meta')
        meta.content = data['remark']
        meta.name = 'description'
        document.head.appendChild(meta)
        // #endif
        this.pages = data
        // 换行符使用空格代替
        let page_data = data['page_data'].replace(/\n/g, '').replace(/\r/g, '')
        this.pageList = JSON.parse(page_data)
      } catch (e) {
        this.error_msg = '数据加载失败，请稍候再试。。。'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
